;(function () {

    // echarts第一步
    const chartWrapper = document.querySelector('.sale-count-wrapper .chart');
     // 生成echarts实例
    const chart = echarts.init(chartWrapper);
    
    // echarts第二步
    // 写option配置项
    function getOption (name) { // year season month ...
        return {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
                backgroundColor: 'rgba(0, 0, 0, .5)',
                borderWidth: 0,
                textStyle: {
                    color: '#ffffff',
                },
            },
            legend: {
                show: true,
                // 名字必须和series中的名字一致
                data: ['销售额', '预测值'],
                textStyle: {
                    color: '#ffd591',
                },
            },
            grid: {
                top: 30,
                right: 10,
                bottom: 20,
                // left: 70, // 不给left的话  left将会根据数据自适应
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: `rgba(${ 13 * 16 + 4 }, ${ 6 * 16 + 11 }, ${ 8 }, .3)`,
                    },
                },
                axisLabel: {
                    color: '#ffd591',
                },
                axisTick: {
                    show: false,
                },
                data: sale[name].map(function (item) {
                    return item.month;
                }),
            },
            yAxis: [
                {
                    name: '单位/万',
                    nameTextStyle: {
                        color: '#ffd591',
                        align: 'left',
                    },
                    splitNumber: 5,
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            // color: '#d46b08',
                            color: `rgba(${ 13 * 16 + 4 }, ${ 6 * 16 + 11 }, ${ 8 }, .3)`,
                        },
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: `rgba(${ 13 * 16 + 4 }, ${ 6 * 16 + 11 }, ${ 8 }, .3)`,
                        },
                    },
                    axisLabel: {
                        color: '#ffd591',
                    },
                },
                {
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: `rgba(${ 13 * 16 + 4 }, ${ 6 * 16 + 11 }, ${ 8 }, .3)`,
                        },
                    },
                },
            ],
            series: [
                {
                    name: '销售额',
                    type: 'line',
                    data: sale[name].map(function (item) {
                        // 因为单位是万，所以让数据项除以10000
                        return Math.round(item.saleCount / 10000);
                    }),
                    smooth: true,
                },
                {
                    name: '预测值',
                    type: 'line',
                    data: sale[name].map(function (item) {
                        // 因为单位是万，所以让数据项除以10000
                        return Math.round(item.predictCount / 10000);
                    }),
                    smooth: true,
                },
            ],
        };
    }

    // echarts第三步
    // 导入配置项
    chart.setOption(getOption('year'));

    let currentIndex = 0;

    // button事件委托
    $('.sale-count-wrapper').on('click', 'button', function () {
        const className = $(this).attr('class');
        $(this)
            .addClass('active')
            .siblings()
            .removeClass('active');
        chart.setOption(getOption(className));
    });

    // 每隔一秒 自动点击下一个按钮
    setInterval(function () {
        currentIndex++;
        $('.sale-count-wrapper button').eq(currentIndex % 4).trigger('click');
    }, 1000);
    
})();
